<template>
  <div>
    <h1>this is KeepAlive page</h1>

    <button @click="changeState('A')">A</button>
    <button @click="changeState('B')">B</button>
    <button @click="changeState('C')">C</button>

    <keep-alive>
      <KeepAliveStateA v-if="state === 'A'" />
    </keep-alive>

    <KeepAliveStateB v-if="state === 'B'" />
    <KeepAliveStateC v-if="state === 'C'" />
  </div>
</template>

<script>
import KeepAliveStateA from "./KeepAliveStateA";
import KeepAliveStateB from "./KeepAliveStateB";
import KeepAliveStateC from "./KeepAliveStateC";
export default {
  components: {
    KeepAliveStateA,
    KeepAliveStateB,
    KeepAliveStateC
  },
  data() {
    return {
      state: "A"
    };
  },
  methods: {
    changeState(state) {
      this.state = state;
    }
  }
};
</script>